/**
 * Datart
 *
 * Copyright 2021
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

function CustomSimpleTree({ dHelper }) {
  const path = dHelper.getBuildPath();
  const colors = [
    '#2f6fdb',
    '#F6BD16',
    '#4873a4',
    '#d15749',
    '#ff9132',
    '#1AAF8B',
    '#2FB8FC',
    '#FF4500',
    '#BBE800',
    '#946DFF',
    '#6193FF',
    '#FF988E',
    '#36BCCB',
    '#8D00A1',
    '#1CC25E',
  ];
  const mockData = [
    {
      label: 'grafana',
      name: 'grafana',
      type: 0,
      url: '#',
    },
    {
      label: 'prometheus',
      name: 'prometheus',
      type: 0,
      url: '#',
    },
    {
      label: 'alertmanager',
      name: 'alertmanager',
      type: 0,
      url: '#',
    },
    {
      label: 'loki',
      name: 'loki',
      type: 0,
      url: '#',
    },
    {
      label: 'nginx',
      name: 'nginx',
      type: 0,
      url: '#',
    },
    {
      label: 'pg-meta-1',
      name: 'pg-meta-1',
      type: 1,
      url: '#',
    },
    {
      label: 'pg-test-1',
      name: 'pg-test-1',
      type: 1,
      url: '#',
    },
    {
      label: 'pg-test-2',
      name: 'pg-test-2',
      type: 1,
      url: '#',
    },
    {
      label: 'pg-test-3',
      name: 'pg-test-3',
      type: 1,
      url: '#',
    },
    {
      label: 'pg-test-1-2',
      name: 'pg-test-1-2',
      type: 2,
      url: '#',
    },
    {
      label: 'pg-test-3-2',
      name: 'pg-meta-3-2',
      type: 2,
      url: '#',
    },
    {
      label: 'pg-test-4-1',
      name: 'pg-test-4-1',
      type: 2,
      url: '#',
    },
    {
      label: 'pg-test-4-2',
      name: 'pg-test-4-2',
      type: 2,
      url: '#',
    },
    {
      label: 'redis-common-1-6501',
      name: 'redis-common-1-6501',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-common-1-6502',
      name: 'redis-common-1-6502',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-common-1-6503',
      name: 'redis-common-1-6503',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-meta-1-6001',
      name: 'redis-meta-1-6001',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-meta-1-6002',
      name: 'redis-meta-1-6002',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-meta-1-6003',
      name: 'redis-meta-1-6003',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-test-1-6501',
      name: 'redis-test-1-6501',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-test-1-6502',
      name: 'redis-test-1-6502',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-test-1-6501',
      name: 'redis-test-1-6501',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-test-2-6501',
      name: 'redis-test-2-6501',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-test-2-6502',
      name: 'redis-test-2-6502',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-test-2-6505',
      name: 'redis-test-2-6505',
      type: 3,
      url: '#',
    },
    {
      label: 'redis-test-2-6506',
      name: 'redis-test-2-6506',
      type: 3,
      url: '#',
    },
  ];
  return {
    config: {
      datas: [],
      styles: [
        {
          label: 'label',
          key: 'label',
          comType: 'group',
          rows: [
            {
              label: 'name',
              key: 'name',
              default: 'Friends',
              comType: 'input',
            },
            {
              label: 'font',
              key: 'font',
              comType: 'font',
              default: {
                fontFamily: 'PingFang SC',
                fontSize: '24',
                fontWeight: 'normal',
                fontStyle: 'normal',
                color: 'yellow',
              },
            },
          ],
        },
      ],
      i18ns: [
        {
          lang: 'zh-CN',
          translation: {
            label: '标签',
            name: '你的姓名',
          },
        },
        {
          lang: 'en-US',
          translation: {
            label: 'Label',
            name: 'Your Name',
          },
        },
      ],
    },
    isISOContainer: 'custom-tree',
    dependency: [],
    meta: {
      id: 'custom-simple-tree',
      name: 'simple树型',
      icon: '24gf-table',
      requirements: [
        {
          group: null,
          aggregate: null,
        },
      ],
    },
    nodeId: 'app612',

    onMount(options, context) {
      const node = context.document.createElement('div');
      node.setAttribute('id', this.nodeId);
      context.document.getElementById(options.containerId).appendChild(node);
      console.log(options, 'option+++++');
      console.log(context, 'option+++++');
      const Vue = context.window.Vue;
      Vue.component('tree-item', {
        props: {
          data: {
            type: Object,
          },
        },
        data() {
          return {
            isFold: false,
          };
        },
        template: `
          <div class="tree-rows tree-line">
          <div class="tree-title">
          <span>
          <span @click="onTraingleClick" class="triangleIcon" v-bind:class="{'is-fold':isFold}" v-if="isShowTriangle">
          <canvas class="trianglecavs" width="20" height="20"></canvas></span>
          <font class="tree-name"> {{ data.name || "" }}</font>
          </span>
          </div>
          <tree-item v-for="(item, index) in data.subdeparts" v-bind:data="item"></tree-item>
          </div>
        `,
        mounted() {
          const nodeList = this.$el.querySelectorAll('.trianglecavs');
          for (const iterator of Array.from(nodeList)) {
            let ctx = iterator.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(20, 0);
            ctx.lineTo(10, 10);
            let grd1 = ctx.createLinearGradient(0, 0, 0, 16);
            grd1.addColorStop(0, '#000');
            grd1.addColorStop(1, '#000');
            ctx.fillStyle = grd1;
            ctx.fill();
          }
        },
        computed: {
          isShowTriangle() {
            return (
              Array.isArray(this.data.subdeparts) && this.data.subdeparts.length
            );
          },
        },
        methods: {
          onTraingleClick() {
            this.isFold = !this.isFold;
          },
        },
      });
      Vue.component('tree-main', {
        props: {
          data: {
            type: Array,
            default() {
              return [
                {
                  id: 1,
                  name: '公司总部',
                  subdeparts: [{ id: 2, name: '子公司1' }],
                },
                { id: 1, name: '长沙分公司', subdeparts: [] },
              ];
            },
          },
        },
        template: `
          <div class="tree-list">
          <tree-item v-for="(item, index) in data" v-bind:data="item"></tree-item>
          </div>
        `,
      });
      const vEl = Vue.extend({
        template: '<div><tree-main></tree-main></div>',
        data() {
          return {
            key: 12,
          };
        },
        name: 'tmp',
      });
      new vEl().$mount(`#${this.nodeId}`);
      // node.innerHTML = this.getTemplate();
    },

    onUpdated(options, context) {
      if (!this.isMatchRequirement(options.config)) {
        return;
      }

      // const name = this.getInfo(options?.config?.styles);
      // this.chart.$set(this.chart.person, "name", name);
    },

    onUnMount() {
      // this.chart && this.chart.dispose();
    },

    onResize(opt, context) {
      // this.chart && this.chart.resize(context);
    },
    getRandomArrayElements(arr, count) {
      var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp,
        index;
      while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
      }
      return shuffled.slice(min);
    },
    getInfo(styleConfigs) {
      const name = dHelper.getValue(styleConfigs, ['label', 'name']);
      return name;
    },

    getTemplate() {
      // 定义人员列表的html字符串
      let htmlStr = '';
      // 用数据生成列表
      mockData.forEach(item => {
        htmlStr += `<div style="display: flex;">
            <div title="${
              item.label
            }" style="border-radius: 3px; padding: 8px;display: flex;cursor: pointer; flex-grow: 1; position: relative; background: ${
          colors[item.type]
        };">
              <div style="display: flex; align-items: center; justify-content: center; flex-grow: 1;">
                <div style="font-size: 12px;position: relative;word-break: break-all; z-index: 1; text-align: center; color: #fff;">
                  <div>
                    <span>${item.label}</span>
                  </div>
                </div>
              </div>
            </div>
        </div>`;
      });
      //grid-template-columns:repeat(auto-fill, minmax(90px, 2fr));
      //repeat(auto-fit, minmax(80px, 1fr))
      return `
   123
      `;
    },
  };
}
